<template>
  <div class="app-container">
    <div v-if="buttonName === '厂家分布'" class="paneC">
      <el-checkbox-group v-model="csList">
        <el-checkbox label="机泵" />
        <el-checkbox label="消防栓" />
        <el-checkbox label="阀门" />
        <el-checkbox label="仪表" />
        <el-checkbox label="钩子" />
        <el-checkbox label="插销" />
      </el-checkbox-group>
    </div>

    <div id="container"></div>

    <div id="pane">
      <p class="pane_title">{{ buttonName || '项目分布' }}</p>
      <p class="pane_title">{{ userRemark }}</p>
      <el-input v-model="projectName" placeholder="请输入项目名称" clearable />

      <div v-if="show_s_table" class="pane_table">
        <el-table
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :data="roomData"
          border
          style="width: 100%"
          @row-click="rowClick"
        >
          <el-table-column type="selection" />
          <el-table-column prop="Bh" label="项目代号" />
          <el-table-column prop="building" label="项目名称" />
          <el-table-column prop="city" label="采购经理" />
        </el-table>
      </div>

      <div v-if="!show_s_table" class="pane_table">
        <el-table
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :data="roomData"
          border
          style="width: 100%"
          @row-click="rowClick"
        >
          <el-table-column type="selection" />
          <el-table-column prop="Bh" label="工号" />
          <el-table-column prop="city" label="姓名" />
          <el-table-column prop="HC" label="职位" />
          <el-table-column prop="state" label="状态" />
          <el-table-column prop="date" label="下次休假" />
        </el-table>
      </div>
    </div>

    <div class="top_button">
      <div class="button_s" @click="getDataS('项目分布')">
        <div class="icon">
          <el-icon :size="15">
            <Edit />
          </el-icon>
        </div>
        <span>项目分布</span>
      </div>

      <div class="button_s" @click="getDataS('厂家分布')">
        <div class="icon">
          <el-icon :size="15"><ChatDotRound /></el-icon>
        </div>
        <span>厂家分布</span>
      </div>
    </div>

    <div class="top_button2">
      <div class="button_s" @click="getDataS('人员分布')">
        <div class="icon">
          <el-icon :size="15"><User /></el-icon>
        </div>
        <span>人员分布</span>
      </div>

      <div class="button_s" @click="getDataS('在岗人员')">
        <div class="icon">
          <el-icon :size="15"><MessageBox /></el-icon>
        </div>
        <span>在岗人员</span>
      </div>

      <div class="button_s" @click="getDataS('休假人员')">
        <div class="icon">
          <el-icon :size="15"><EditPen /></el-icon>
        </div>
        <span>休假人员</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader';
import { ref, onMounted, watch } from 'vue';
import { getUser } from '../../https/api/user';
let map = ref<any>(null);
// 点聚合
let cluster = ref<any>(null);
let infoWindow = ref<any>(null);

let windowHeight = ref(document.documentElement.clientHeight);
let AMap = ref<any>(null);
let init = async () => {
  let res = await AMapLoader.load({
    key: '4056aa1b76794cdb8df1d5ee0000bdb8&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.PlaceSearch,AMap.DistrictSearch,AMap.HeatMap,AMap.3DTilesLayer,AMap.IndoorMap,AMap.MoveAnimation,AMap.ElasticMarker,AMap.MarkerCluster,AMap.IndexCluster,AMap.MouseTool,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.EllipseEditor,AMap.GeoJSON,AMap.PolylineEditor,AMap.PolygonEditor,AMap.AutoComplete,AMap.Driving,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geocoder,AMap.GraspRoad,AMap.StationSearch,AMap.LineSearch,AMap.ArrivalRange,AMap.CitySearch,AMap.Geolocation,AMap.Weather,AMap.RangingTool', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.IndexCluster', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });
  AMap.value = res;
  map.value = new res.Map('container', {
    resizeEnable: true,
    zoom: 5,
    pitchEnable: true,
  });

  cluster.value = new res.MarkerCluster(map.value, roomData.value, {
    gridSize: 60,
    renderClusterMarker: _renderClusterMarker,

    renderMarker: _renderMarker,
  });
};

let userName = ref('');
let userRemark = ref('');
let getData = async (data: any) => {
  let res = await getUser(data);
  console.log(res);
  userName.value = res.data[0].userName;
  userRemark.value = res.data[0].userRemark;
};

let _renderMarker = (context: {
  data: any;
  marker: {
    on: (arg0: string, arg1: (e: any) => void) => unknown;
    setContent: (arg0: string) => void;
    setOffset: (arg0: any) => void;
  };
}) => {
  console.log(context);

  let zoom = map.value.getZoom(); // 获取当前地图级别
  console.log(zoom);
  if (zoom >= 7) {
    let content = `
   <div class='tips_ie' style="background-color: white;border-radius: 0.4rem; padding:8px;font-size:11px;width:250px;  box-shadow:0 2px 6px 0 rgba(114, 124, 245, .5) ;">
     <p style='font-weight:800;line-height:15px;'>公司：${context.data[0].community}</p>
     <p style='margin-top:10px;line-height:15px;'>地址：${context.data[0].building}</p>
     <p style='margin-top:10px'>联系电话：${context.data[0].Bh}</p>
     <div class='sanjioaxin' style=' position: absolute;
     color: #000;
     position: absolute;
     color: #0e89f5;
    position: absolute;
    margin-left: 4px;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    border: solid 1px currentColor;
    border-radius: 20px 20px 20px 0;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          top: 100px;
    left: 42%; 
      '></div
    </div>
     
  `;
    let offset = new AMap.value.Pixel(-120, -120);
    context.marker.setContent(content);
    context.marker.setOffset(offset);
  } else {
    let content = `
    <div style="text-align: center;font-size: 14px;line-height: 43px;border-radius: 21.5px; width: 43px;height: 43px;color: white;    background-color: rgb(103 238 16);">
    1
    </div>
     
  `;
    // let offset = new AMap.value.Pixel(-9, -9);
    context.marker.setContent(content);
    // context.marker.setOffset(offset);
  }

  // 点击自定义小点的时候的事件
  // context.marker.on("click",(e: any)=>{
  //   console.log(e);
  //   map.value.setCenter([e.lnglat.KL, e.lnglat.kT]); // 设置地图中心点

  // map.value.setZoom(14); // 设置地图层级
  //   // map.value.setZoomAndCenter(14,[ e.lnglat.KL,e.lnglat.kT]);
  // })
};

let projectName = ref('');

let _renderClusterMarker = (context: any) => {
  let factor = Math.pow(context.count / roomData.value.length, 1 / 18);
  let div = document.createElement('div');
  let Hue = 180 - factor * 180;
  let bgColor = 'hsla(' + Hue * 3 + ',100%,40%,1)';
  let fontColor = 'hsla(' + Hue + ',100%,90%,1)';

  let shadowColor = 'hsla(' + Hue + ',100%,90%,1)';

  div.style.backgroundColor = bgColor;
  let size = Math.round(30 + Math.pow(context.count / roomData.value.length, 1 / 5) * 20);
  div.style.width = div.style.height = size + 'px';

  div.style.borderRadius = size / 2 + 'px';
  div.style.boxShadow = '0 0 5px ' + shadowColor;
  div.innerHTML = context.count;
  div.style.lineHeight = size + 'px';
  div.style.color = fontColor;
  div.style.fontSize = '14px';
  div.style.textAlign = 'center';
  // context.marker.setOffset( AMap.value.Pixel(-size / 2, -size / 2));
  context.marker.setContent(div);

  // 点击大聚合点时候的事件
  context.marker.on('click', (e: any) => {
    console.log(e);
    let curZoom = map.value.getZoom();
    console.log(curZoom);

    map.value.setZoomAndCenter(curZoom, e.lnglat);
  });
};
let getClick = (item: any) => {
  map.value.setCenter([item.lnglat.KL, item.lnglat.kT]); // 设置地图中心点
  //       var zoom = 20; //zoom范围[11,18]
  map.value.setZoom(20); // 设置地图层级
};

let rowClick = (row: any) => {
  getClick(row);
};

let buttonName = ref('');
let show_s_table = ref(true);
let getDataS = (name: any) => {
  buttonName.value = name;
  if (name === '项目分布') {
    roomData.value = data1;
    show_s_table.value = true;
  } else if (name === '厂家分布') {
    roomData.value = data4;
    show_s_table.value = true;
  } else if (name === '人员分布') {
    roomData.value = data3;
    show_s_table.value = false;
  } else if (name === '休假人员') {
    roomData.value = data2;
    show_s_table.value = true;
  } else if (name === '在岗人员') {
    roomData.value = data4;
    show_s_table.value = true;
  }
  init();
};

let csList = ref([]);

let data4: any = [
  {
    lnglat: [114.177087, 22.313861],
    community: '香港22001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '旺角',
    markers: [],
    id: 1,
    city: '香港',
  },
  {
    lnglat: [114.174986, 22.310604],

    community: '香港002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 2,
    city: '香港',
  },
  {
    lnglat: [114.170009, 22.310604],

    community: '香港003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 3,
    city: '香港',
  },

  {
    lnglat: [114.194512, 22.326271],

    community: '香港004设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '九龙城',
    id: 4,
    city: '香港',
  },
];

let data3: any = [
{
    lnglat: [108.972555,34.270142],
    state: '在岗',
    date: '10天',
    community: '陕西2有限责任公22司',
    building: 'xxx路XX街001设备22商有限责任公司',
    Bh: '0298905',
    HC: '项目经理',
    area: '未央区',
    id: 5,
    city: '陕西',
  },
{
    lnglat: [108.963312,34.279938],
    state: '在岗',
    date: '10天',
    community: '陕西2有限责任公22司',
    building: 'xxx路XX街001设备22商有限责任公司',
    Bh: '0298905',
    HC: '项目经理',
    area: '未央区',
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [107.93, 34.28],
    state: '在岗',
    date: '10天',
    community: '陕西2有限责任公22司',
    building: 'xxx路XX街001设备22商有限责任公司',
    Bh: '0298905',
    HC: '项目经理',
    area: '未央区',
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [107.93, 34.286],
    state: '离职',
    date: '120天',
    HC: '工程师',
    community: '陕西有限责任公22司23',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298965',
    area: '未央区',
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [107.95, 34.27],
    state: '休假中',
    date: '3天',
    HC: '会计',
    community: ' 陕西有限责任公司4',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '008765',
    area: '未央区',
    id: 7,
    city: '陕西',
  },
];

let data1: any = [
  {
    lnglat: [115.297838, 31.661218],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.297838, 31.661218],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.34002, 31.481527],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.508746, 31.373546],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.129111, 31.373546],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.889875, 28.505749],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.967558, 28.47161],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.928717, 28.437461],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.909296, 28.488681],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.928717, 28.47161],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.928717, 28.488681],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.928717, 28.47161],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.909296, 28.47161],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [120.045241, 28.454537],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.909296, 28.47161],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [102.85432, 24.882017],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [102.631921, 25.016446],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [102.891387, 24.848386],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [102.780187, 24.982853],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [100.370868, 29.753785],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [103.966314, 30.7145],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [104.077513, 30.555034],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [104.077513, 30.586949],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [106.523899, 26.684232],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [106.598032, 26.783544],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [106.672164, 26.717345],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [106.746297, 26.617975],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [108.266022, 22.779996],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [110.860673, 23.869165],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [108.340155, 22.779996],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.179401, 38.024559],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.727763, 37.924806],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.527624, 37.841829],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.527624, 37.918954],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.527624, 37.841829],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.495053, 37.867546],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [109.802453, 37.738635],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [109.803, 37.7385],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [109.903, 37.755385],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [109.903, 37.75285],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.658807, 39.944257],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.6507, 39.944],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [115.658807, 39.944327],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [119.067014, 40.821802],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [126.939491, 42.754315],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [126.60347, 45.845218],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [126.411459, 45.7783],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [110.714508, 41.466621],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [110.714508, 41.466621],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.586621, 42.146457],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [112.058589, 42.075235],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },

  {
    lnglat: [105.61653, 34.04137],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区33',
    markers: [],
    id: 2,
    city: '甘肃',
  },
  {
    lnglat: [95.171161, 40.105717],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区13',
    markers: [],
    id: 4,
    city: '甘肃',
  },
  {
    lnglat: [94.999221, 40.400969],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区53',
    markers: [],
    id: 11,
    city: '甘肃',
  },
  {
    lnglat: [100.071458, 38.911859],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街122甘肃责任公司',
    Bh: '02989082765',
    area: '区区2',
    markers: [],
    id: 12,
    city: '甘肃',
  },
  {
    lnglat: [105.35862, 34.573966],
    country: '中国',
    community: '甘肃23123有限责任公司',
    building: 'xxx路XX街甘肃木齐责任公司',
    Bh: '02989082765',
    area: '区区1',
    markers: [],
    id: 1,
    city: '甘肃',
  },
  {
    lnglat: [86.200693, 41.767914],
    country: '中国',
    community: '乌鲁木备23123有限责任公司',
    building: 'xxx路XX街122乌鲁木齐责任公司',
    Bh: '02989082765',
    area: '区区1',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [86.135371, 41.787737],
    country: '中国',
    community: '乌鲁木备23123有限责任公司',
    building: 'xxx路XX街122乌鲁木齐责任公司',
    Bh: '02989082765',
    area: '区区1',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [86.224358, 41.779519],
    country: '中国',
    community: '乌鲁木备23123有限责任公司',
    building: 'xxx路XX街122乌鲁木齐责任公司',
    Bh: '02989082765',
    area: '区区2',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [87.601998, 43.800715],
    country: '中国',
    community: '乌鲁木备23123有限责任公司',
    building: 'xxx路XX街122乌鲁木齐责任公司',
    Bh: '02989082765',
    area: '区区',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [87.617638, 43.794957],
    country: '中国',
    community: '乌鲁木齐设备商223有限责任公司',
    building: 'xxx路XX街0122乌鲁木齐责任公司',
    Bh: '02989082765',
    area: '天山',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [87.622721, 43.792618],
    country: '中国',
    community: '乌鲁木齐设备商有限责任公司',
    building: 'xxx路XX街001乌鲁木责任公司',
    Bh: '02989082765',
    area: '天山',
    markers: [],
    id: 1,
    city: '乌鲁木齐',
  },
  {
    lnglat: [114.177087, 22.313861],
    country: '中国',
    community: '香港22001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '旺角',
    markers: [],
    id: 1,
    city: '香港',
  },
  {
    lnglat: [114.174986, 22.310604],
    country: '中国',
    community: '香港002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 2,
    city: '香港',
  },
  {
    lnglat: [114.170009, 22.310604],
    country: '中国',
    community: '香港003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 3,
    city: '香港',
  },

  {
    lnglat: [114.194512, 22.326271],
    country: '中国',
    community: '香港004设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '九龙城',
    id: 4,
    city: '香港',
  },

  {
    lnglat: [108.93, 34.28],
    country: '中国',
    community: '陕西001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [108.93, 34.286],
    country: '中国',
    community: '陕西002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [108.95, 34.27],
    community: ' 陕西003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 7,
    country: '中国',
    city: '陕西',
  },
];

let data2: any = [
  {
    lnglat: [108.93, 34.28],

    community: '陕西001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [108.93, 34.286],

    community: '陕西002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [108.95, 34.27],
    community: ' 陕西003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '未央区',
    id: 7,
    city: '陕西',
  },
];

onMounted(() => {
  roomData.value = data1;
  init();
  getData({ userName: JSON.parse(sessionStorage.getItem('userInfo'))?.user.name }) || '1';
});

let roomData = ref([]);

// watch(roomData,()=>{

// init();
// },{deep:true})
</script>

<style lang="less" scoped>
.button_s:hover {
  color: white;
  background: #79bbff;
}
.button_s {
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 20px;
  font-size: 10px;
  .icon {
    margin-bottom: 5px;
  }
}
.top_button {
  display: flex;

  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px;
  background: white;
  border-radius: 10px;
}

.top_button2 {
  display: flex;

  position: absolute;
  top: 20px;
  left: 250px;
  padding: 5px;
  background: white;
  border-radius: 10px;
}
.pane_table {
  margin-top: 20px;
}
.pane_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.markerClass {
  background-color: #c0e5dfa5;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .imgimg {
    width: 50px;
    height: 50px;
  }
  .bgimg {
    position: absolute;
    left: 50%;
    width: 50px;
    height: 30px;
    //  background: url("/public/1.png") no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
}
#container {
  position: relative;
  width: 75%;
  height: calc(100vh - 6rem);
}
.amap-marker-label {
  position: absolute;
  z-index: 2;
  border: none;
  background-color: #ffffff;
  white-space: nowrap;
  cursor: default;
  padding: 4px;
  font-size: 14px;
  line-height: 19px;
  color: #097a7a;
}

html {
  font-size: 12px;
}
.amap-copyright {
  box-sizing: content-box;
}
* {
  box-sizing: border-box;
}
.input-textarea {
  color: grey;
  height: 8em;
  overflow: auto;
  border-radius: 0.4rem;

  margin-bottom: 1rem;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  line-height: 1.5;
  font-weight: 300;
  color: #111213;
}

hr {
  margin: 0.5rem 0;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

label {
  display: inline-block;
  margin-bottom: 0.4rem;
}

label,
.btn {
  margin-left: 0;
  font-size: 1rem;
}

button,
input,
select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  text-transform: none;
}

[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}

h4 {
  font-family: inherit;
  line-height: 1.8;
  font-weight: 300;
  color: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
}

.btn:hover {
  color: #fff;
  background-color: #25a5f7;
  border-color: #25a5f7;
}

.btn:hover {
  text-decoration: none;
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  justify-content: flex-end;
}

.tips_ie {
  position: relative;
}

.sanjioaxin {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #333;
  width: 0;
  height: 0;
}

.input-item:last-child {
  margin-bottom: 0;
}

.input-item > select,
.input-item > input[type='text'],
.input-item > input[type='date'] {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-item > select:not(:last-child),
.input-item > input[type='text']:not(:last-child),
.input-item > input[type='date']:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-item > select:not(:first-child),
.input-item > input[type='text']:not(:first-child),
.input-item > input[type='date']:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-item-prepend {
  margin-right: -1px;
}

.input-item-text,
input[type='text'],
input[type='date'],
select {
  height: calc(2.2rem + 2px);
}

.input-item-text {
  width: 6rem;
  text-align: justify;
  padding: 0.4rem 0.7rem;
  display: inline-block;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;

  border-radius: 0.25rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.amap_lib_placeSearch_list li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.input-item-text input[type='checkbox'],
.input-item-text input[type='radio'] {
  margin-top: 0;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  //bottom: 1rem;
  top: 5rem;
  opacity: 0.85;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  height: 780px;
  overflow: auto;
}

.input-text {
  line-height: 2rem;
  margin-right: 2rem;
  font-size: 18px;
}

.info hr {
  margin-right: 0;
  margin-left: 0;
  border-top-color: grey;
}

.info {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
}

.code {
  left: 1.5rem;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  overflow: auto;
  margin-bottom: 0rem;
}

.code .btn {
  top: 1rem;
  position: absolute;
  right: 1rem;
}

.code .result {
  border-radius: 0.5rem;
  padding: 1rem;
  bottom: 1rem;
  position: absolute;
  top: 5.5rem;
  right: 1rem;
  left: 1rem;
  overflow: auto;
}

.code .status {
  color: #80adff;
  display: inline-block;
  font-size: 14px;
}

.code h4 {
  display: inline-block;
  max-width: 20rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

select,
input[type='text'],
input[type='date'] {
  display: inline-block;
  width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
    no-repeat right 0.75rem center;
  background-size: 8px 10px;

  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type='text'],
input[type='date'] {
  background: #fff;
  padding: 0.375rem 0.75rem;
}

select:focus,
input[type='text']:focus,
input[type='date']:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

select:focus::-ms-value,
input[type='text']:focus::-ms-value,
input[type='date']:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

/* native toastr */
.native-toast {
  position: fixed;
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 33px;
  color: white;
  left: 50%;
  text-align: center;
  padding: 6px 12px;
  opacity: 0;
  z-index: 99999;
  transition: transform 0.25s, opacity 0.25s, top 0.25s;
  box-sizing: border-box;
}

.native-toast-bottom {
  bottom: 50px;
  -ms-transform: translateX(-50%) translateY(50px);
  transform: translateX(-50%) translateY(50px);
}

.native-toast-bottom.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-bottom.native-toast-edge {
  bottom: 0;
}

.native-toast-top {
  top: 50px;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-top.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-top.native-toast-edge {
  top: 0;
}

.native-toast-center {
  top: 0;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-center.native-toast-shown {
  opacity: 1;
  top: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.native-toast-edge {
  border-radius: 0;
  width: 100%;
  text-align: left;
}

@media screen and (min-width: 40rem) {
  .native-toast:not(.native-toast-edge) {
    max-width: 18rem;
  }
}

/*
  max-width does not seem to work in small screen?
*/

/*@media screen and (max-width: 768px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 400px;
  }
}

@media screen and (max-width: 468px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 300px;
  }
}*/

/* types */

.poi-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.native-toast-error {
  background-color: #d92727;
  color: white;
}

.native-toast-success {
  background-color: #62a465;
  color: white;
}

.native-toast-warning {
  background-color: #fdaf17;
  color: white;
}

.native-toast-info {
  background-color: #5060ba;
  color: white;
}

[class^='native-toast-icon-'] {
  vertical-align: middle;
  margin-right: 8px;
}

[class^='native-toast-icon-'] svg {
  width: 16px;
  height: 16px;
}

.input-card {
  width: 32rem;
  z-index: 170;
  color: #fff;
  background-color: #304156;
  padding-bottom: 15px;
}

.input-card .btn {
  margin-right: 0.8rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
.input-text {
  font-size: 30x;
}
label,
.btn {
  margin-left: 0;
  font-size: 1.6rem;
}
.input-item {
  margin-top: 12px;
}

.input-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  position: fixed;
  top: 5rem;
  opacity: 0.85;
  left: 20rem;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  font-size: 1.5em;
  color: #cfe2f7;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
select,
input[type='text'],
input[type='date'] {
  color: #45b2f7;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  font-size: 1.5em;
  color: #4f5d6f;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 280px;
  height: 43px;
}
.el-form-item {
  margin-bottom: 7px;
  margin-top: 7px;
}

.paneC {
  position: absolute;
  left: 64%;
  top: 20px;
  padding: 20px;
  background: white;
  z-index: 999;
  /deep/ .el-checkbox-group {
    display: flex;
    flex-direction: column;
  }
}
.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px;
}

.content_s {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
}

#pane {
  background: white;
  padding: 20px;
  position: relative;
  background-color: white;
  height: calc(100vh - 6rem);
  overflow-y: auto;
  width: 30%;
  // overflow: auto;
  // height: 600px;
}
.amap_lib_placeSearch {
  border-radius: 2px;
  padding: 5px 10px 2px;
}
.amap_lib_placeSearch {
  font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #565656;
  font-size: 12px;
  line-height: 22px;
  word-wrap: break-word;
  background-color: #fff;

  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  min-width: 270px;
}
.amap_lib_placeSearch_list {
  background: #fff none repeat scroll 0 0;
}
.amap_lib_placeSearch ol,
.amap_lib_placeSearch ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.amap_lib_placeSearch .poibox {
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  padding: 10px 5px;
  position: relative;
  min-height: 35px;
}
.amap_lib_placeSearch_pic {
  width: 46px;
  height: 46px;
  float: left;
  margin: 4px 10px 0 0;
}
.amap_lib_placeSearch_pic img {
  width: 46px;
  height: 46px;
}
.amap_lib_placeSearch .poibox .poi-title {
  margin-left: 25px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.amap_lib_placeSearch .poibox .poi-title .poi-name {
  max-width: 160px;
  display: inline-block;
}
.amap_lib_placeSearch .amap-ellipsis {
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amap_lib_placeSearch .poibox .poi-info {
  word-break: break-all;
  margin: 0 0 0 25px;
  overflow: hidden;
}
.amap_lib_placeSearch .poibox .poi-info p {
  color: #999;
  font-family: Tahoma;
  line-height: 20px;
}
.amap_lib_placeSearch .amap-ellipsis {
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.amap_lib_placeSearch p {
  margin: 0;
}
</style>
